<template>
	<el-dialog v-model="dialog" :title="state.form.id ? '设置数据权限' : '设置数据权限'" width="40%" :before-close="handleClose">
		<el-form ref="formRef" :model="state.form" label-width="120px" :rules="state.rules">
			<el-form-item label="角色名称" prop="roleName">
				<el-input v-model="state.form.roleName" maxlength="10" disabled show-word-limit></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12" class="mb20">
					<el-form-item label="角色编码" prop="roleCode">
						<el-input v-model="state.form.roleCode" disabled maxlength="30" show-word-limit></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" class="mb20">
					<el-form-item label="数据权限" prop="dataScope">
						<ma-dict-select v-model="state.form.dataScope" dict-type="data_scope_type"
							placeholder="请选择数据权限类型" clearable></ma-dict-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item v-if="state.form.dataScope == '5'" label="部门权限">
				<el-tree :data="state.deptList" show-checkbox node-key="id" ref="treeDataScope"
					:default-checked-keys="state.dataScopeTreeObj" :props="defaultProps">
				</el-tree>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getById, grant } from '/@/api/upms/sysrole';
import { ElMessage, FormInstance } from 'element-plus';
import { getTreeList } from '/@/api/upms/sysdept';
import { roleTreeKeys } from '/@/api/upms/menu';
import { el } from 'element-plus/es/locale';
const emit = defineEmits(['initPage']);
const state = reactive({
	form: {
		id: undefined,
		roleName: '',
		roleCode: '',
		roleDesc: '',
		dataScope: ''
	},
	rules: {
		roleName: [
			{
				required: true,
				message: '请输入角色名称',
				trigger: 'change',
			},
		],
		roleCode: [
			{
				required: true,
				message: '请输入角色编码',
				trigger: 'change',
			},
		],
		roleDesc: [
			{
				required: true,
				message: '请输入角色描述',
				trigger: 'change',
			},
		],
		menuIds: [
			{
				required: true,
				message: '请选择菜单权限',
				trigger: 'change',
			},
		],
		dataScope: [
			{
				required: true,
				message: '请选择数据权限类型',
				trigger: 'change',
			},
		]
	},
	menuList: [],
	dataScopeGrantList: [],
	dataScopeTreeObj: [],
	deptList: []

});
const treeDataScope = ref()
const dialog = ref(false);
const loading = ref(false);
const formRef = ref();
const defaultProps = {
	label: 'name',
	value: 'id'
};
const initForm = (row: any | undefined) => {
	dialog.value = true;
	if (row && row.id) {
		getDetail(row.id);
	}
	handleDeptList()
	state.dataScopeTreeObj = [];
	roleTreeKeys({ roleIds: row.id }).then((response: any) => {
		if (response.data.data) {
			state.dataScopeTreeObj = response.data.data.dataScope;
		}
	});

};
const getDetail = (id: string) => {
	loading.value = true;
	getById(id).then((response: any) => {
		state.form = response.data.data;
		loading.value = false;
	});
};
/**
 * 关闭事件
 */
const handleClose = () => {
	resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	state.form.id = undefined;
	loading.value = false;
	dialog.value = false;
	formEl.resetFields();
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;

	if (state.form.dataScope == '5') {
		let dataScopeList = treeDataScope.value.getCheckedKeys(false);
		if (dataScopeList.length == 0) {
			return ElMessage.error('请选择授权部门');
		}
	}
	await formEl.validate((valid) => {
		if (valid) {
			loading.value = true;
			let dataScopeList = []
			if(treeDataScope.value){
				dataScopeList = treeDataScope.value.getCheckedKeys(false);
			}
			grant({ roleId: state.form.id,dataScope:state.form.dataScope,dataScopeIds: dataScopeList }).then(() => {
				loading.value = false;
				ElMessage.success('更新成功');
				dialog.value = false;
				emit('initPage');
			});
		}
	});
};

/**
 * 查询全部部门
 */
const handleDeptList = () => {
	getTreeList()
		.then((response: any) => {
			state.deptList = response.data.data;
		})
		.catch(() => { });
};
defineExpose({
	initForm,
});
</script>
<style scoped>
.box {
  height: 800px;
}

.el-scrollbar {
  height: 100%;
}

.box .el-scrollbar__wrap {
  overflow: scroll;
}
</style>
